<template>
  <el-dialog
      :title="isEdit ? '编辑检查类型' : '添加检查类型'"
      v-model="dialogVisible"
      width="500px"
      :close-on-click-modal="false"
      @close="handleClose"
  >
    <el-form
        ref="formRef"
        :model="form"
        :rules="rules"
        label-width="100px"
    >
      <el-form-item label="名称" prop="name">
        <el-input v-model="form.name" placeholder="请输入检查类型名称"/>
      </el-form-item>
      <el-form-item label="内容" prop="context">
        <el-input
            v-model="form.context"
            type="textarea"
            :rows="4"
            placeholder="请输入检查类型内容"
        />
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="handleSubmit" :loading="loading">确定</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import {ref, computed, watch} from 'vue'
import {ElMessage} from 'element-plus'
import type {FormInstance} from 'element-plus'
import type {CheckType} from '@/types/checkType'
import {addCheckType, updateCheckType} from '@/api/checkType'

const props = defineProps<{
  modelValue: boolean
  checkType?: CheckType
  isEdit: boolean
}>()

const emit = defineEmits<{
  (e: 'update:modelValue', value: boolean): void
  (e: 'success'): void
}>()

const formRef = ref<FormInstance>()
const loading = ref(false)

const dialogVisible = computed({
  get: () => props.modelValue,
  set: (value) => emit('update:modelValue', value)
})

const form = ref({
  id: undefined as number | undefined,
  name: '',
  context: ''
})

const rules = {
  name: [{required: true, message: '请输入检查类型名称', trigger: 'blur'}],
  context: [{required: true, message: '请输入检查类型内容', trigger: 'blur'}]
}

// 监听 checkType 属性变化，更新表单数据
watch(
    () => props.checkType,
    (newVal) => {
      if (newVal) {
        form.value = {
          id: newVal.id,
          name: newVal.name,
          context: newVal.context
        }
      } else {
        // 重置表单
        form.value = {
          id: undefined,
          name: '',
          context: ''
        }
      }
    },
    {immediate: true}
)

// 监听对话框显示状态，重置表单
watch(
    () => dialogVisible.value,
    (newVal) => {
      if (!newVal) {
        handleClose()
      } else if (props.checkType) {
        // 当对话框打开且有 checkType 数据时，更新表单
        form.value = {
          id: props.checkType.id,
          name: props.checkType.name,
          context: props.checkType.context
        }
      }
    }
)

// 关闭对话框
const handleClose = () => {
  dialogVisible.value = false
  formRef.value?.resetFields()
  form.value = {
    id: undefined,
    name: '',
    context: ''
  }
}

// 提交表单
const handleSubmit = async () => {
  if (!formRef.value) return

  try {
    await formRef.value.validate()
    loading.value = true

    const checkTypeData = {
      ...form.value,
      id: form.value.id || 0
    }

    if (props.isEdit) {
      await updateCheckType(checkTypeData)
    } else {
      await addCheckType(checkTypeData)
    }

    ElMessage.success(props.isEdit ? '更新成功' : '添加成功')
    emit('success')
    dialogVisible.value = false
  } catch (error) {
    console.error('表单提交失败:', error)
  } finally {
    loading.value = false
  }
}
</script>

<style scoped>
.dialog-footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}
</style>

<style scoped>
.dialog-footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}
</style> 